<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
    <link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/easyEditor/easyEditor.min.js"></script>
    <style>
        .footer {
            height: 40px;
            width: 100%;
            background-color: #f8f9fa;
            position: fixed;
            bottom: 0;
            margin-bottom: 0px;

        }

    </style>

    <script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem('user'));
            var userId = 0;
            var params = getParams();
            $.ajaxSettings.async = false;
            $.get('/strategyComments/{strategyCommentId}/details', {strategyCommentId: params.strategyCommentId}, function (data) {
                userId = data.user.id
                var temp = '';
                $('.comment').renderValues(data, {
                    getSrc: function (item, value) {
                        console.log(data);
                        $.each(value, function (index, ele) {
                            temp += '<li><img src=' + ele + '></li>'
                        })
                        $(item).append(temp);
                    },
                    getHref: function (item, value) {
                        var href = $(item).data('href');
                        $(item).attr('href', href + value);
                    }
                });
            })
            $.ajaxSettings.async = true;
            //当前页的input框
            var currentInput = $("#currentPage");

            //用于存储游记的数组容器
            var travelArr = [];

            //总页数
            var pages = 1;

            queryReplies();
            //分页查询


            function queryReplies() {
                //获取当前页的值
                var currentPage = currentInput.val();//1
                $.get('/commentReplies/{strategyCommentId}/replies', {
                    strategyCommentId: params.strategyCommentId,
                    currentPage: currentPage,
                    userId: user.id
                }, function (data) {
                    console.log(data);
                    if (data.list != null) {
                        //合并两个数组到第一个参数数组上
                        $.merge(travelArr, data.list);
                        //用于渲染时循环,循环时是取list的属性出来
                        var json = {
                            list: travelArr
                        };
                        $('.reply').renderValues(json);
                    } else {
                        $('.panel-default').html('<div class="comment-list">快来发表你的评论吧</div>')
                    }
                    //设置总页数
                    pages = data.pages;
                })
                //当前页input框+1
                currentInput.val(parseInt(currentPage) + 1);
            }

            //当页面滚动条变化时，执行的函数
            $(window).scroll(function () {
                if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                    var currentPage = currentInput.val();
                    //判断是否小于或等于最后一页,如果是就去查询
                    if (currentPage <= pages) {
                        queryReplies();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '已经到底了!',
                            autoClose: 1000
                        });

                    }
                }
            });
            getHref:getHref
            $.ajaxSettings.async = true;
            //查询到当前登录用户所关注的所以用户id
            $.get("/concerneds", function (data) {
                var num = $.inArray(userId, data);
                if (num != -1) {
                    $('#followBtn').text("已关注");
                    //消除点击事件
                    $("#followBtn").unbind("click");
                }
            })
            //关注功能
            $('#followBtn').click(function () {
                $.post('/concerneds/' + userId, function (data) {
                    if (data.success) {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '关注成功',
                            autoClose: 500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                        $('#followBtn').html("已关注");
                        //消除点击事件
                        $("#followBtn").unbind("click");
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: data.msg,
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                })
            });
            //评论数
            $.get('/commentReplies/{strategyCommentId}/count', {strategyCommentId: params.strategyCommentId}, function (data) {
                var json = {
                    num: data
                }
                $('.count').renderValues(json)
            })
            //点击跳转评论页面
           /* $('#commentReply').click(function () {
                window.location.href = "/mine/CommentReply.html?strategyCommentId=" + params.strategyCommentId + '&';
            })*/
            var user = JSON.parse(sessionStorage.getItem('user'));
            /**
             * 攻略点评点赞
             */
            //查询当前用户是否对该攻略点评点赞
            /* $.get('/upvokes/hasStategyLikes', {
             relationId: params.strategyCommentId,
             userId: user.id,
             type: 2
             }, function (data) {
             if (data == '') {
             $('#stategyPraise').click(function () {
             $.ajax({
             type: 'post',
             url: '/upvokes/{userId}/comments',
             data: 'userId=' + user.id + '&relationId=' + params.strategyCommentId + '',
             success: function (data) {
             if (data.success) {
             window.location.reload();
             $(document).dialog({
             type: 'notice',
             infoText: '点赞成功',
             autoClose: 500,
             position: 'center'  // center: 居中; bottom: 底部
             });
             }
             }
             })
             })
             } else {
             /!* $('#stategyPraise').addClass("fa fa-thumbs-up")
             $(document).dialog({
             type: 'notice',
             infoText: '点过赞了',
             autoClose: 500,
             position: 'center'  // center: 居中; bottom: 底部
             });*!/
             }
             })*/

            /**
             * 攻略评论点赞
             *  只能点一次赞先查询是否已点赞
             */
            var relationId = 0;
            var upvokeId = 0;
            $.get("/upvokes/" + params.strategyCommentId + "/" + userId, {
                type: 2
            }, function (data) {
                if (data.success) {
                    upvokeId = data.result.id;
                    relationId = data.result.relationId;
                    $('#stategyPraise').removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up")
                }
            });

            $('#stategyPraise').click(function () {

                if ($('#stategyPraise').hasClass("fa-thumbs-o-up")) {
                    $.post("/upvokes/" + userId + "/comments", {relationId: params.strategyCommentId}, function (data) {
                        relationId = data.result.relationId;
                        upvokeId = data.result.id;
                        console.log(data);
                        $('#stategyPraise').removeClass("fa-thumbs-o-up").addClass("fa-thumbs-up")
                        $("#likeNum").html(parseInt($("#likeNum").html()) + 1);
                    })
                } else {
                    $.ajax({
                        type: 'post',
                        url: '/upvokes/strategyComment',
                        data: {_method: "DELETE", relationId: relationId, id: upvokeId},
                        success: function (data) {
                            $('#stategyPraise').removeClass("fa-thumbs-up").addClass("fa-thumbs-o-up")
                            $("#likeNum").html(parseInt($("#likeNum").html()) - 1);
                        }
                    })
                }

            });

            //实例化一个easyEditor编辑器
            var editor = easyEditor('editor');
            //渲染完页面之后,点击按钮添加评论
            $("#sendLetterBtn").click(function () {
                //var content = $(".myCommont").val();
                //获取发送内容
                var data = editor.getContent({
                    emojiSign: ['[', ']'], //表情分隔符
                    blockSign: '%' //行块分隔符
                });
                var content = data.text
                $.post('/commentReplies', {
                    content: content,
                    'strategyComment.id': params.strategyCommentId
                }, function (data) {
                    if (data.success) {
                        window.parent.location.reload();
                    }
                })
            })
        })
    </script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="/index.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>点评详情</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="comment">
    <div class="container ">
        <div class="row">
            <div class="col-2 comment-head">
                <a data-href="../userProfiles.html?userId=" render-key="user.id" render-fun="getHref">
                    <img class="rounded-circle" render-src="user.headImgUrl">
                </a>
                <button class="btn" id="followBtn"><i class="fa fa-hand-o-right"> </i> 关注</button>
            </div>
            <div class="col">
                <span class="comment-star"><i class="fa fa-star"></i><i class="fa fa-star"></i><i
                        class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></span>

                <span class="comment-date" render-html="createTime"></span>
                <div class="comment-content">
                    <p render-html="content"></p>
                </div>
                <ul class="comment-img" render-key="imgList" render-fun="getSrc">

                </ul>

                <div class="comment-link">
                    <a data-href="../strategyCatalogs.html?strategyId=" render-key="strategy.id" render-fun="getHref">
                        <img render-src="strategy.coverUrl"> <span render-html="strategy.title"></span>
                        <i class="fa fa-angle-right fa-2x"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="count d-flex justify-content-between">
        <div class="p-2">评论<span render-html="num"></span></div>
        <div class="p-2">赞<span render-html="likeNum" id="likeNum"></span><i class="fa fa-thumbs-o-up"
                                                                             id="stategyPraise"></i></div>
    </div>

</div>


<div class="panel panel-default" style="margin-bottom: 50px">
    <input type="hidden" name="currentPage" id="currentPage" value="1">
    <div class="panel-body">
        <div class="reply">
            <div class="container" render-loop="list">
                <div class="row">
                    <div class="col-2 comment-head">
                        <a href="userProfiles.html" data-id="43">
                            <img class="rounded-circle" style="width: 30px" render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="col">
                        <span class="comment"><i render-html="list.user.nickName"></i></span>

                        <span class="comment-date" render-html="list.createTime"></span>
                        <div class="comment-content">
                            <p render-html="list.content"></p>
                        </div>
                        <div class="d-flex icon">
                            <!--<a href="strategyComment.html">
                                <i class="fa  fa-commenting-o " style="margin-right: 10px"> 评论 </i>
                                <i class="fa fa-thumbs-o-up" id="replyPraise">点赞<span
                                        render-html="list.likeNum"> </span> </i>
                            </a>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--<div class="comment-list">
   &lt;!&ndash; 快来发表你的评论吧&ndash;&gt;

</div>-->

<div class="footer">
    <div class="d-flex justify-content-between">
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o"> 添加你的评论</i>
            <a data-toggle="modal" data-target="#myModal">
                <div class="p-2" id="commentReply"><i class="fa fa-commenting-o"></i></div>
            </a>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div id="editor" style="width:100%;height: 200px"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModelBtn">关闭</button>
                <button type="button" class="btn btn-primary" id="sendLetterBtn">评论</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>